<template>
  <div id="home">
    <!-- 导航组件 -->
    <Navbar class="home-nav"><div slot="center">购物街</div></Navbar>
   <!-- 吸顶的Tab-Control 组件, 用于替换下面的Tab-Control组件 -->
  <Tab-Control class="Tab-Control" :titles="['流行', '新款', '精选']" ref="tabControlA" @tabClick="tabClick" v-show="isTabFixed"/>
    <!-- 可滚动区域 -->
  <Scroll class="home-content" ref= "scrolldata" :probe-type= "3" :pull-up-load="true" @scroll="Btnxiaos" @pullingUp="loadMore" >
    <!-- 轮播图组件 -->
    <Home-Swiper :lunbodata = "lunbodata" @swiperLoad="swiperLoad"/>
    <!-- 圆形图标选项卡组件 -->
    <Recommend-View :recommend = "recommend"/>
    <!-- 本周流行 -->
    <Feature-View/>
    <!-- 分类选项卡 -->
    <Tab-Control :titles="['流行', '新款', '精选']" ref="tabControlB" @tabClick="tabClick"/>
    <!-- 分类选项卡商品数据 -->
    <Product-List :product = "showproduct"/>
  </Scroll>
    <!-- 回到顶部 想要组件的根元素上监听一个原生事件必须添加 native 事件修饰符 -->
    <Back-Top @click.native="backClick" v-show="activebackTop"/>
</div>
</template>

<script>
// components
import Navbar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import ProductList from 'components/content/product/ProductList'
import Scroll from 'components/common/scroll/Scroll'
// import BackTop from 'components/content/backTop/BackTop'

// views/home
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'

// network
import {
  getHometoodataA, 
  getHometoodataB,
  getHomeProductobj,
} from 'network/home'

// 导入防抖事件方法
// import{ debounce } from 'common/antiShake'
import { itemListenerMixin, backTopMixin } from 'common/mixin'

export default {
    name:'Home',
    components:{
        Navbar,
        TabControl,
        ProductList,
        Scroll,
        // BackTop,
        HomeSwiper,
        RecommendView,
        FeatureView
    },

    mixins:[itemListenerMixin, backTopMixin],

    data() {
      return {
        lunbodata: [], // 存放轮播图数组
        recommend: [], // 存放圆形图标选项卡数组
        productobj: {  // 分类选项卡数据对象
           'pop':{
              page: 0,  // 页码
              list: []  // 存放数据
           },
            'new':{
              page: 0,  // 页码
              list: []  // 存放数据
           },
            'sell':{
              page: 0,  // 页码
              list: []  // 存放数据
           },
          },
        currentType: 'pop',    // 当前数据对象
        // activebackTop: false,  // BackTop button 当前隐藏
        tabOffsetTop: 0,       // Tab-Control组件到页面顶部的高度
        isTabFixed: false,     // 默认Tab-Control 组件为不吸顶状态
        }
      },

      // 计算属性, 根据当前 currentType 值动态获取数据
    computed: {
        showproduct(){
          return this.productobj[this.currentType].list
      }
    },
     
  // 销毁阶段的钩子函数
    destroyed() {
    console.log('组件已销毁');
  },
  // 进入组件时监听
    activated() {
    //  console.log('进入组件');
    this.$refs.scrolldata.scrollTo(0, this.saveY, 0)
    this.$refs.scrolldata.refresh()
  },
  // 离开组件时监听
    deactivated() {
    //  console.log('离开组件');
    this.saveY = this.$refs.scrolldata.ScrollY()
    //  取消全局事件的监听
    this.$bus.$off('itemImagesLoad', this.itemImgListener)
  },
  created(){
    this.getHometoodataA()  // 轮播图及圆形选项卡的数据请求

    this.getHomeProductobj('pop') // 分类选项卡数据的数据请求
    this.getHomeProductobj('new')
    this.getHomeProductobj('sell')
  },
  mounted() {
    // //  监听ProductListItem 中图片是否加载完成
    //   const refresh = debounce(this.$refs.scrolldata.refresh, 180)
    //   this.itemImgListener = () => {
    //       refresh()
    //   }
    //    this.$bus.$on('itemImagesLoad', this.itemImgListener)
    // //  检查事件是否监听成功
    //   console.log('图片加载成功')
  },
  methods:{
    // 网络请求多个数据
    //  1. 请求轮播图数据,圆形选项卡的数据
    getHometoodataA() {
      getHometoodataA().then(res => {
      //  console.log(res.data);
      this.lunbodata = res.data.banner.list;
      this.recommend = res.data.recommend.list;
      //  console.log(this.lunbodata.list);
    })
  }, 
    //  2. 分类选项卡中商品的数据
    getHomeProductobj(type) {  
      const pages = this.productobj[type].page+ 1
      getHomeProductobj(type, pages).then(res => {
      // console.log(res.data)
      this.productobj[type].list.push(...res.data.list)
      this.productobj[type].page += 1

      // 完成上拉加载更多
      this.$refs.scrolldata.finishPullUp()
    })
  },
   // 事件监听相关方法
    tabClick(i){
      switch (i) {
        case 0:
          this.currentType = 'pop'
          break;
        case 1:
           this.currentType = 'new'
          break;
        case 2:
           this.currentType = 'sell'
          break;
      }
      // 让吸顶的Tab-Control组件和不吸顶的Tab-Control组件的点击类别信息保持一致
      this.$refs.tabControlA.controlIndex= i;
      this.$refs.tabControlB.controlIndex= i;
  },

  /*  
  // 回到顶部触发事件
  // 原生写法
    backClick() {
       this.$refs.scrolldata.scrollTo(0, 0, 600);
    },
  */

    Btnxiaos(weizi) {
      /*    原生写法
        //  console.log(weizi) // 查看是否成功获取子组件参数
        //  根据滚动的当前位置和设定值做一个判断, 实现是否隐藏
            this.activebackTop = (-weizi.y) >1200
      
      */

  // BackTop button 隐藏判断    
  // 混入方法写法 --- 根据滚动的当前位置和设定值 activebackTop 做一个判断, 实现是否隐藏
      this.btnYingChang(weizi)

  // 决定Tab-Control 是否吸顶(添加属性position: fixed)
      this.isTabFixed = (-weizi.y) > this.tabOffsetTop 
    },
    // 监听可滚动区域到达底部触发上拉加载更多事件
    loadMore() {
      console.log('可加载区域高度'+ this.$refs.scrolldata.scroll.scrollerHeight);
      this.getHomeProductobj(this.currentType)
    },
   swiperLoad() {
      console.log('TabControl组件到顶部距离'+ this.$refs.tabControlB.$el.offsetTop);
      this.tabOffsetTop = this.$refs.tabControlB.$el.offsetTop
   }
 }
    
}
</script>

<style scoped>
#home{
  position: relative;
  /* padding-top: 44px; */
  height: 100vh;
}
.home-nav {
  background-color: #d43c9ccc;
  /* #e91e498a */
  color: #fff;

  /* 这是游览器自带的滚动效果,Navbar组件必须设置吸顶效果。
  但是我们用到了butter-scroll框架,
  自定了可滚动区域所以Navbar组件并不用设置吸顶效果 */
  /* position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; */

}
.Tab-Control{
  position: relative;
  top: -0.1%;
  z-index: 999;
}

.home-content{
 position: absolute;
 top: 44px;
 bottom: 49px;
 left: 0;
 right: 0;
 overflow: hidden;
}
 /*{
 height: calc(100% - 93px);
 overflow: hidden;
 margin-top: 44px;;
} */
</style>